/* 底部标签栏组件 - HarmonyOS设计指南实现 */

@import '../base/color.less';
@import '../base/window.less';

/* 尺寸变量 */
:root {
  --tab-height: calc(48 * var(--unit));
  --tab-padding: calc(8 * var(--unit));
  --tab-icon-size: calc(24 * var(--unit));
  --tab-text-size: calc(10 * var(--unit));
  --tab-active-text-size: calc(11 * var(--unit));
  --tab-nav-bar-height: calc(34 * var(--unit));
  --tab-badge-size: calc(18 * var(--unit));
  --tab-badge-font-size: calc(10 * var(--unit));
}

/* 动效变量 */
:root {
  --tab-transition-duration: 0.3s;
  --tab-bounce-amplitude: 1.2;
}

/* 底部标签栏容器 */
.bottom-tab-container {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  height: var(--tab-height);
  background-color: var(--color-comp-background-primary);
  display: flex;
  justify-content: space-around;
  align-items: center;
  box-shadow: 0 -1px 2px var(--color-comp-divider);
  z-index: 100;
  
  /* 系统导航条避让 */
  @media (bottom-safe-area: var(--tab-nav-bar-height)) {
    padding-bottom: var(--tab-nav-bar-height);
    height: calc(var(--tab-height) + var(--tab-nav-bar-height));
  }
  
  /* 模糊背景效果 */
  &.blur-enabled {
    background-color: transparent;
    -webkit-backdrop-filter: blur(calc(10 * var(--unit)));
    backdrop-filter: blur(calc(10 * var(--unit)));
    &::before {
      content: '';
      position: absolute;
      top: 0;
      left: 0;
      right: 0;
      bottom: 0;
      background-color: rgba(255, 255, 255, 0.8);
      z-index: -1;
    }
  }
  
  /* 深色模式适配 */
  @media (prefers-color-scheme: dark) {
    background-color: var(--color-background-secondary);
    
    &.blur-enabled {
      &::before {
        background-color: rgba(0, 0, 0, 0.7);
      }
    }
  }
}

/* 标签项样式 */
.tab-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  flex: 1;
  padding: var(--tab-padding) 0;
  cursor: pointer;
  transition: all var(--tab-transition-duration) ease;
  position: relative;
  
  /* 图标样式 */
  .tab-icon {
    width: var(--tab-icon-size);
    height: var(--tab-icon-size);
    margin-bottom: calc(4 * var(--unit));
    fill: var(--color-icon-secondary);
    
    /* 激活态图标 */
    &.active {
      fill: var(--color-icon-emphasize);
    }
    
    /* 弹跳动效 */
    &.active-animation {
      animation: bounce var(--tab-transition-duration) ease;
    }
  }
  
  /* 文本样式 */
  .tab-text {
    font-size: var(--tab-text-size);
    color: var(--color-font-secondary);
    white-space: nowrap;
    
    /* 激活态文本 */
    &.active {
      font-size: var(--tab-active-text-size);
      color: var(--color-font-emphasize);
      font-weight: 500;
    }
  }
  
  /* 徽章样式 */
  .tab-badge {
    position: absolute;
    top: var(--tab-padding);
    right: calc(50% - var(--tab-icon-size) / 2);
    width: var(--tab-badge-size);
    height: var(--tab-badge-size);
    border-radius: 50%;
    background-color: var(--color-waring);
    color: white;
    font-size: var(--tab-badge-font-size);
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 500;
    min-width: var(--tab-badge-size);
    
    /* 点徽章样式 */
    &.dot {
      width: calc(8 * var(--unit));
      height: calc(8 * var(--unit));
      font-size: 0;
    }
    
    /* 数字溢出样式 */
    &.overflow {
      min-width: var(--tab-badge-size);
      border-radius: var(--tab-badge-size)/2;
      padding: 0 calc(6 * var(--unit));
    }
  }
  
  /* 激活态整体样式 */
  &.active {
    .tab-icon {
      fill: var(--color-icon-emphasize);
    }
    .tab-text {
      color: var(--color-font-emphasize);
      font-size: var(--tab-active-text-size);
    }
  }
  
  /* 点击反馈 */
  &:active {
    transform: scale(0.95);
    background-color: var(--color-interactive-pressed);
  }
  
  /* 禁用状态 */
  &.disabled {
    opacity: 0.5;
    cursor: not-allowed;
    
    &:active {
      transform: none;
      background-color: transparent;
    }
  }
}

/* 弹跳动画 */
@keyframes bounce {
  0%, 100% {
    transform: scale(1);
  }
  50% {
    transform: scale(1.2);
  }
}

/* 4+1运营模式 */
.tab-item.operation-tab {
  .tab-icon {
    width: calc(32 * var(--unit));
    height: calc(32 * var(--unit));
  }
}

@media (min-width: @breakpoint-medium) {
  .bottom-tab-container {
    position: fixed;
    bottom: auto;
    left: 0;
    top: 0;
    width: var(--tab-height);
    height: 100vh;
    flex-direction: column;
    justify-content: flex-start;
    padding-top: var(--tab-height);
    
    /* 移除底部导航条避让 */
    @media (bottom-safe-area: var(--tab-nav-bar-height)) {
      padding-bottom: 0;
      height: 100vh;
    }
  }
  
  .tab-item {
    padding: var(--tab-padding) 0;
    
    /* 文本方向调整 */
    .tab-text {
      font-size: calc(12 * var(--unit));
      writing-mode: vertical-rl;
      // transform: rotate(180deg);
    }
  }
}

/* 分栏布局适配 */
.bottom-tab-container.split-view {
  .tab-item {
    .tab-text {
      display: none; /* 小屏隐藏文本 */
    }
    
    /* 大屏显示文本 */
    @media (min-width: @breakpoint-medium) {
      .tab-text {
        display: block;
      }
    }
  }
}

/* 沉浸式导航样式 */
.bottom-tab-container.immersive {
  background-color: transparent;
  box-shadow: none;
  
  .tab-item {
    background-color: rgba(255, 255, 255, 0.1);
    margin: 0 calc(4 * var(--unit));
    border-radius: calc(12 * var(--unit));
    
    &:active {
      background-color: rgba(255, 255, 255, 0.2);
    }
  }
  
  /* 深色模式沉浸式 */
  @media (prefers-color-scheme: dark) {
    .tab-item {
      background-color: rgba(0, 0, 0, 0.1);
      
      &:active {
        background-color: rgba(0, 0, 0, 0.2);
      }
    }
  }
}